---
layout: default
title: Shuffle.js FAQ
description: Frequently asked questions about Shuffle.js
image: /hero.png
extraJS: [ "faq.js" ]
---
<section class="container">
  <div class="row">
    <h2>FAQs</h2>
  </div>
</section>


<section class="container search-section">
  <div class="row">
    <div class="col-6@sm">
      <input type="search" placeholder="Search..." aria-label="Search frequently asked questions" class="textfield textfield--large" id="search" />
    </div>
  </div>
</section>


<section class="container">
  <div class="row">

    <article id="spaces" class="col-12@sm question js-question">
      <div class="question__inner">
        <h3 class="question__title">Why Does Shuffle leave empty spaces?</h3>
        <p class="question__answer">The algorithm used to place items does not keep track of empty space nor try to fill them. If you require this functionality, I suggest <a target="_blank" rel="noopener" href="http://packery.metafizzy.co/">packery</a>.</p>
      </div>
    </article>

    <article id="images" class="col-12@sm question js-question">
      <div class="question__inner">
        <h3 class="question__title">Why are images overlapping?</h3>
        <p class="question__answer">If the size of your items are dependent on images, they can overlap if shuffle is initialized before all the images have loaded. Check out <a href="{{ site.baseurl }}{% post_url 2013-05-03-images %}">this demo</a> to see how to fix it.</p>
      </div>
    </article>

    <article id="isotope" class="col-12@sm question js-question">
      <div class="question__inner">
        <h3 class="question__title">What&rsquo;s the difference between Shuffle and Isotope?</h3>
        <div class="question__answer">
          <span>Isotope:</span>
          <ul>
            <li>more layout modes</li>
            <li>more options</li>
            <li>community of users</li>
            <li>commercial use requires a license</li>
          </ul>

          <span>Shuffle:</span>
          <ul>
            <li>robust filtering</li>
            <li>slightly smaller</li>
            <li>responsive by default</li>
            <li>sizer element (which <a href="https://packery.metafizzy.co/options.html#element-sizing">packery also has</a>)</li>
          </ul>

          <p>They are <em>very</em> similar, but I think Shuffle's filtering and sorting are easier to customize, which is the main reason I created this plugin. Isotope has a much larger community, is battle-tested, and has many stackoverflow answers.</p>
        </div>
      </div>
    </article>

    <article id="padding" class="col-12@sm question js-question">
      <div class="question__inner">
        <h3 class="question__title">Padding isn&rsquo;t working on the shuffle element.</h3>
        <p class="question__answer">The padding is ignored by Shuffle because it creates complexities with absolute positioning the shuffle-items when they have a percentage width as well as setting the height of the shuffle container because of box-sizing. To fix this, wrap the shuffle element in another element which has the padding on it.</p>
      </div>
    </article>

    <article id="centering" class="col-12@sm question js-question">
      <div class="question__inner">
        <h3 class="question__title">Can I center the layout?</h3>
        <p class="question__answer">Yes. Use the <code>isCentered</code> option.</p>
      </div>
    </article>

    <article class="col-12@sm question js-question">
      <div class="question__inner">
        <h3 class="question__title">It&rsquo;s not working with Boostrap 4</h3>
        <p class="question__answer">Bootstrap 4 uses flexbox for grids, so your main shuffle container element must be a <code>.row</code> and the items inside the row (shuffle items) should all be columns. See the <a href="{{ site.baseurl }}{% post_url 2017-06-12-flexbox-grid %}">Flexbox demo</a>.</p>
      </div>
    </article>

    <article class="col-12@sm question question--unanswered">
      <div class="question__inner">
        <h3 class="question__title">Didn't find an answer?</h3>
        <p class="question__answer">Try looking at the javascript files for the demos or searching the issues <a href="https://github.com/Vestride/Shuffle/issues">on GitHub</a>.</p>
      </div>
    </article>
  </div>
</section>


<section class="container">
  <div class="row">
  </div>
</section>
